<template>
  <!-- 未实名 -->
  <div
    v-if="
      !personVerified && !enterpriseVerified && !enterpriseSuc && !personalSuc2
    "
  >
    <Alert show-icon
      >实名认证决定了账号归属。若用他人信息进行实名认证，在人员变动或账号下财产出现纠纷时，可能对个人/企业带来经济损失，并且可能影响合同和获取发票。</Alert
    >
    <div class="page-gird-container" style="display: flex; justify-content: space-around;">
      <div class="content">
        <Icon
          type="ios-people"
          size="100"
          color="#1890ff"
          style="cursor: pointer"
          @click="enterprise"
        />
        <p class="font-size-lg" @click="enterprise">企业实名认证></p>
        <p style="color: #a3a3a3; margin-bottom: 14px">
          含企业、政府、事业单位、个体工商户等
        </p>
      </div>
      <div class="content">
        <Icon
          type="ios-contact"
          size="100"
          color="#1890ff"
          style="cursor: pointer"
          @click="person"
        />
        <p class="font-size-lg" @click="person">个人实名认证></p>
        <p style="color: #a3a3a3; margin-bottom: 14px">个人</p>
      </div>
    </div>
  </div>
  <!-- 个人实名完成后跳转回实名认证 -->
  <div v-if="personalSuc && toEnterprise && !enterpriseVerified">
    <Alert show-icon
      >实名认证决定了账号归属。若用他人信息进行实名认证，在人员变动或账号下财产出现纠纷时，可能对个人/企业带来经济损失，并且可能影响合同和获取发票。</Alert
    >
    <div class="page-gird-container" style="display: flex">
      <div class="content">
        <Icon
          type="ios-people"
          size="100"
          color="#1890ff"
          style="cursor: pointer"
          @click="enterprise"
        />
        <p class="font-size-lg" @click="enterprise">企业实名认证></p>
        <p style="color: #a3a3a3; margin-bottom: 14px">
          含企业、政府、事业单位、个体工商户等
        </p>
      </div>
      <div class="content">
        <Icon
          type="ios-contact"
          size="100"
          color="#1890ff"
          style="cursor: pointer"
          @click="person"
        />
        <p class="font-size-lg" @click="person">个人实名认证></p>
        <p style="color: #a3a3a3; margin-bottom: 14px">个人</p>
      </div>
    </div>
  </div>
  <!-- 个人实名 -->
  <div
    v-if="personVerified && !personalSuc"
    class="page-gird-container"
    v-cloak
  >
    <div class="title">个人信息</div>
    <Form
      ref="formValidate"
      :model="formValidate"
      :rules="ruleValidate"
      :label-width="107"
      label-position="right"
    >
      <FormItem label="手机号码：">
        <Input
          v-model="formValidate.mobile"
          :disabled="true"
          style="width: 350px"
        ></Input>
        <p style="color: rgba(0, 0, 0, 0.45)">
          请确认该手机号码是您<span style="color: #f60">本人所有</span
          >，否则无法验证通过
        </p>
      </FormItem>
      <FormItem label="姓名：" prop="compellation">
        <Input v-model="formValidate.compellation" style="width: 350px"></Input>
        <p style="color: rgba(0, 0, 0, 0.45)">
          请填写您本人的<span style="color: #f60">真实姓名</span
          >，否则无法验证通过
        </p>
      </FormItem>
      <FormItem label="身份证号码：" prop="id_card">
        <Input v-model="formValidate.id_card" style="width: 350px"></Input>
        <p style="color: rgba(0, 0, 0, 0.45)">
          请填写您本人的真实<span style="color: #f60">身份证号码</span
          >，否则无法验证通过
        </p>
      </FormItem>
      <Button type="primary" @click="submit" style="margin-left: 107px"
        >提交认证审核</Button
      >
    </Form>
  </div>
  <!-- 企业实名 -->
  <div
    v-if="enterpriseVerified && !enterpriseSuc"
    class="page-gird-container"
    v-cloak
  >
    <Form
      ref="enterpriseValidate"
      :model="enterpriseValidate"
      :rules="enterpriseRuleValidate"
      :label-width="163"
      label-position="right"
    >
      <div style="border-bottom: 1px solid #e0e0e0">
        <div class="title">企业信息</div>
        <FormItem label="企业/公司名称：" prop="enterpriseName">
          <Input
            v-model="enterpriseValidate.enterpriseName"
            style="width: 350px"
          ></Input>
        </FormItem>
        <FormItem label="统一社会信用代码：" prop="enterpriseCode">
          <Input
            v-model="enterpriseValidate.enterpriseCode"
            style="width: 350px"
          ></Input>
        </FormItem>
        <FormItem label="上传营业执照附件：" prop="enterpriseLicense">
          <p style="color: #a3a3a3; margin-bottom: 14px">
            请上传彩色扫描件；仅支持 jpg、jpeg、bmp、png
            格式图片，大小不超过3M。
          </p>
          <Upload
            :action="action"
            :format="['jpg', 'jpeg', 'png']"
            :on-success="handleUpload1"
            name="image"
            :headers="headers"
            :data="fileData"
          >
            <Button icon="ios-cloud-upload-outline">上传文件</Button>
          </Upload>
        </FormItem>
        <FormItem label="企业/公司开户银行：" prop="enterpriseBank">
          <Input
            v-model="enterpriseValidate.enterpriseBank"
            style="width: 350px"
          ></Input>
        </FormItem>
        <FormItem label="开户支行名称：">
          <Input
            v-model="enterpriseValidate.bankBranch"
            style="width: 350px"
          ></Input>
        </FormItem>
        <FormItem label="对公银行账号：" prop="enterpriseAccount">
          <Input
            v-model="enterpriseValidate.enterpriseAccount"
            style="width: 350px"
          ></Input>
        </FormItem>
        <FormItem label="企业/公司详细地址：">
          <Cascader
            :data="district"
            v-model="enterpriseValidate.district"
            v-width="250"
            style="margin-bottom: 14px"
          />
          <Input
            v-model="enterpriseValidate.address"
            style="width: 350px"
            type="textarea"
          />
        </FormItem>
        <FormItem label="公司座机号：" prop="enterpriseNumber">
          <Input
            v-model="enterpriseValidate.enterpriseNumber"
            style="width: 350px"
          ></Input>
        </FormItem>
      </div>
      <div style="margin-top: 24px">
        <div class="title">法人/被授权人信息</div>
        <FormItem label="您的身份：">
          <RadioGroup v-model="button1" type="button">
            <Radio label="法定代表人"></Radio>
            <Radio label="授权人"></Radio>
          </RadioGroup>
        </FormItem>
        <!-- 法定代表人 -->
        <div v-if="button1 == '法定代表人'">
          <FormItem label="法定代表人姓名：" prop="compellation">
            <Input
              v-model="enterpriseValidate.compellation"
              style="width: 350px"
            ></Input>
          </FormItem>
          <FormItem label="法定代表人身份证号：" prop="id_card">
            <Input
              v-model="enterpriseValidate.id_card"
              style="width: 350px"
            ></Input>
          </FormItem>
          <FormItem label="上传授权书：" prop="authorization">
            <p style="color: #a3a3a3; margin-bottom: 14px">
              仅支持JPG、JPEG、PNG格式图片，大小不超过10M；需盖企业公章。
            </p>
            <Upload
              :action="action"
              :format="['jpg', 'jpeg', 'png']"
              :on-success="handleUpload2"
              name="image"
              :headers="headers"
              :data="fileData"
            >
              <Button icon="ios-cloud-upload-outline">上传文件</Button>
            </Upload>
          </FormItem>
          <FormItem label="法定代表人手机号码：" prop="mobile">
            <Input
              v-model="enterpriseValidate.mobile"
              style="width: 350px"
            ></Input>
          </FormItem>
          <FormItem label="验证码：" prop="sms_captcha">
            <Input
              v-model="enterpriseValidate.sms_captcha"
              style="width: 150px; margin-right: 10px"
            ></Input>
            <span v-show="show" @click="sms_captcha" style="cursor: pointer"
              >获取验证码</span
            >
            <span v-show="!show" class="count">{{ count }}s后重新获取</span>
          </FormItem>
        </div>
        <!-- 授权人 -->
        <div v-else>
          <FormItem label="被授权人姓名：" prop="compellation">
            <Input
              v-model="enterpriseValidate.compellation"
              style="width: 350px"
            ></Input>
          </FormItem>
          <FormItem label="被授权人身份证号码：" prop="id_card">
            <Input
              v-model="enterpriseValidate.id_card"
              style="width: 350px"
            ></Input>
          </FormItem>
          <FormItem label="上传授权书：" prop="authorization">
            <p style="color: #a3a3a3; margin-bottom: 14px">
              仅支持JPG、JPEG、PNG格式图片，大小不超过10M；需盖企业公章。
            </p>
            <Upload
              :action="action"
              :format="['jpg', 'jpeg', 'png']"
              :on-success="handleUpload2"
              name="image"
              :headers="headers"
              :data="fileData"
            >
              <Button icon="ios-cloud-upload-outline">上传文件</Button>
            </Upload>
          </FormItem>
          <FormItem label="被授权人手机号码：" prop="mobile">
            <Input
              v-model="enterpriseValidate.mobile"
              style="width: 350px"
            ></Input>
          </FormItem>
          <FormItem label="验证码：" prop="sms_captcha">
            <Input
              v-model="enterpriseValidate.sms_captcha"
              style="width: 150px; margin-right: 10px"
            ></Input>
            <span v-show="show" @click="sms_captcha" style="cursor: pointer"
              >获取验证码</span
            >
            <span v-show="!show" class="count">{{ count }}s后重新获取</span>
          </FormItem>
        </div>
        <Button
          @click="enterpriseSubmit"
          type="primary"
          style="margin-left: 163px"
          >提交认证审核</Button
        >
      </div>
    </Form>
  </div>
  <!-- 个人实名成功 -->
  <div v-if="personalSuc && !toEnterprise && !enterpriseSuc">
    <Alert show-icon @click="toEnterprise = true"
      >如果您需要认证为企业，可以前往<a>企业认证</a></Alert
    >
    <div
      class="page-gird-container"
      style="display: flex; justify-content: center"
    >
      <Icon type="md-person-add" size="100" color="#1890ff" />
      <div
        style="
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        "
      >
        <p style="color: #282828; font-size: 18px; margin-left: 20px">
          恭喜您！您已完成个人实名认证
        </p>
        <div style="margin: 20px">
          <p>真实姓名：{{ personalInfo.compellation }}</p>
          <p>认证时间：{{ personalInfo.date }}</p>
          <p>证件号码： {{ personalInfo.id_card }}</p>
        </div>
      </div>
    </div>
  </div>
  <!-- 企业认证成功 -->
  <div
    v-if="enterpriseSuc"
    class="page-gird-container"
    style="display: flex; justify-content: center"
    v-cloak
  >
    <Icon type="ios-people" size="100" color="#1890ff" />
    <div
      style="
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      "
    >
      <p style="color: #282828; font-size: 18px; margin-left: 20px">
        恭喜您！您已完成企业实名认证
      </p>
      <div style="margin: 20px">
        <p>公司/企业名称：{{ enterpriseInfo.name }}</p>
        <p>统一社会信用代码 {{ enterpriseInfo.code }}</p>
      </div>
    </div>
  </div>
  <Modal v-model="modal" title="支付宝实名认证" style="display: flex">
    <div style="display: flex; flex-direction: column; align-items: center">
      <p>请使用支付宝“扫一扫”功能扫描下方二维码进行验证</p>
      <canvas id="canvas"></canvas>
    </div>
  </Modal>
</template>

<script>
    import cookies from "@/libs/util.cookies";
    import district from "@/assets/district.json";
    import Setting from "@/setting";
    import {
        realNamePersonal,
        realNameAlipayQuery,
        realNameEnterprise,
        realNameInfo,
    } from "@/api/set";
    import { setInfo } from '@/libs/userInfo'
    import { memberSmsCaptcha } from "@/api/api";
    import QRCode from "qrcode";

    export default {
        name: "set-realName",
        data() {
            return {
                show: true,
                action: "",
                button1: "法定代表人",
                button2: "被授权人",
                certifyUrl: "",
                modal: false,
                personVerified: false,
                enterpriseVerified: false,
                toEnterprise: false,
                // 个人表单
                formValidate: {
                    mobile: "",
                    compellation: "",
                    id_card: "",
                },
                // 企业表单
                enterpriseValidate: {
                    enterpriseName: "", // 企业名称
                    enterpriseCode: "", // 企业代码
                    enterpriseLicense: "", // 营业执照
                    enterpriseBank: "", // 企业开户银行
                    enterpriseAccount: "", // 企业对公账号
                    enterpriseNumber: "", // 企业座机号码
                    identity: "", // 申请人身份
                    compellation: "", // 申请人姓名
                    id_card: "", // 申请人身份证号
                    authorization: "", // 授权书
                    mobile: "", //申请人手机号
                    sms_captcha: "", // 短信验证码
                    bankBranch: [], // 开户支行(可选)
                    district: "", // 公司所在地(可选)
                    address: "", // 公司详细地址
                },
                // 个人必填
                ruleValidate: {
                    compellation: [
                        { required: true, message: "请输入姓名", trigger: "blur" },
                    ],
                    id_card: [
                        { required: true, message: "请输入身份证号", trigger: "blur" },
                    ],
                },
                // 企业必填
                enterpriseRuleValidate: {
                    enterpriseName: [
                        { required: true, message: "请输入企业名称", trigger: "blur" },
                    ],
                    enterpriseCode: [
                        { required: true, message: "请输入企业代码", trigger: "blur" },
                    ],
                    enterpriseLicense: [
                        { required: true, message: "请上传营业执照", trigger: "blur" },
                    ],
                    enterpriseBank: [
                        { required: true, message: "请输入开户银行", trigger: "blur" },
                    ],
                    enterpriseAccount: [
                        { required: true, message: "请输入企业对公账号", trigger: "blur" },
                    ],
                    enterpriseNumber: [
                        { required: true, message: "请输入企业座机号码", trigger: "blur" },
                    ],
                    compellation: [
                        { required: true, message: "请输入申请人姓名", trigger: "blur" },
                    ],
                    id_card: [
                        { required: true, message: "请输入申请人身份证号", trigger: "blur" },
                    ],
                    authorization: [
                        { required: true, message: "请上传授权书", trigger: "blur" },
                    ],
                    mobile: [
                        { required: true, message: "请输入申请人手机号码", trigger: "blur" },
                    ],
                    sms_captcha: [
                        { required: true, message: "请输入短信验证码", trigger: "blur" },
                    ],
                },
                uniqueId: "",
                sign: "",
                headers: {},
                fileData: {
                    source: "Real-name",
                },
                count: "",
                personalSuc: false,
                personalSuc2: true,
                enterpriseSuc: false,
                time: "",
                enterpriseInfo: {},
                personalInfo: {},
                district: [],
            };
        },
        methods: {
            person() {
                if (this.personalSuc) {
                    this.$Message.warning("个人实名认证已通过");
                } else {
                    this.personVerified = true;
                }
            },
            enterprise() {
                if (this.personalSuc && !this.enterpriseSuc) {
                    this.enterpriseVerified = true;
                } else if (this.enterpriseSuc) {
                    this.$Message.warning("企业实名认证已通过");
                } else {
                    this.$Message.warning("企业实名认证前先进行个人实名认证");
                }
            },
            // 企业提交
            enterpriseSubmit() {
                if (this.button1 == "法定代表人") {
                    this.enterpriseValidate.identity = "legalPerson";
                } else {
                    this.enterpriseValidate.identity = "certigier";
                }
                realNameInfo().then((res) => {
                    if (res.enterprise == "Await") {
                        this.$Message.warning("正在审核，请勿再次提交");
                    } else {
                        this.$refs["enterpriseValidate"].validate((valid) => {
                            if (valid) {
                                realNameEnterprise({
                                    enterpriseName: this.enterpriseValidate.enterpriseName,
                                    enterpriseCode: this.enterpriseValidate.enterpriseCode,
                                    enterpriseLicense: this.enterpriseValidate.enterpriseLicense,
                                    enterpriseBank: this.enterpriseValidate.enterpriseBank,
                                    enterpriseAccount: this.enterpriseValidate.enterpriseAccount,
                                    enterpriseNumber: this.enterpriseValidate.enterpriseNumber,
                                    identity: this.enterpriseValidate.identity,
                                    compellation: this.enterpriseValidate.compellation,
                                    id_card: this.enterpriseValidate.id_card,
                                    authorization: this.enterpriseValidate.authorization,
                                    mobile: this.enterpriseValidate.mobile,
                                    sms_captcha: this.enterpriseValidate.sms_captcha,
                                    district: this.enterpriseValidate.district,
                                    address: this.enterpriseValidate.address,
                                    bankBranch: this.enterpriseValidate.bankBranch,
                                }).then(() => {
                                    this.enterpriseVerified = false;
                                });
                            }
                        });
                    }
                });
            },
            // 个人提交
            submit() {
                this.$refs["formValidate"].validate((valid) => {
                    if (valid) {
                        realNamePersonal({
                            compellation: this.formValidate.compellation,
                            id_card: this.formValidate.id_card,
                        }).then((res) => {
                            this.time = res.time;
                            this.uniqueId = res.uniqueId;
                            this.sign = res.sign;
                            this.certifyUrl = res.certifyUrl;
                            var canvas = document.getElementById("canvas");
                            QRCode.toCanvas(canvas, this.certifyUrl);
                            this.modal = true;
                            let timer = setInterval(() => {
                                this.fun(timer);
                            }, 2000);
                        });
                    }
                });
            },
            fun(timer) {
                setTimeout(() => {
                    realNameAlipayQuery({
                        uniqueId: this.uniqueId,
                        sign: this.sign,
                        time: this.time,
                    })
                        .then((res) => {
                            if (res) {
                                this.getRealNameInfo();
                                setInfo();
                                clearInterval(timer);
                                this.modal = false;
                                this.personalSuc = true;
                                this.personalSuc2 = true;
                                this.personVerified = false;
                            }
                        })
                        .catch(() => {
                            clearInterval(timer);
                            Setting.request.errorModalType = "";
                        });
                }, 0);
            },
            handleUpload1(res) {
                this.enterpriseValidate.enterpriseLicense = res.data.path;
            },
            handleUpload2(res) {
                this.enterpriseValidate.authorization = res.data.path;
            },
            sms_captcha() {
                const TIME_COUNT = 60;
                if (!this.timer) {
                    memberSmsCaptcha().then();
                    this.count = TIME_COUNT;
                    this.show = false;
                    this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= TIME_COUNT) {
                            this.count--;
                        } else {
                            this.show = true;
                            clearInterval(this.timer);
                            this.timer = null;
                        }
                    }, 1000);
                }
            },
            getRealNameInfo() {
                realNameInfo().then((res) => {
                    if (res.realName == "Passed") {
                        this.personalInfo = res.realNameInfo;
                        this.personalSuc = true;
                        this.personalSuc2 = true;
                    } else {
                        this.personalSuc = false;
                        this.personalSuc2 = false;
                    }
                    if (res.enterprise == "Passed") {
                        this.enterpriseInfo = res.enterpriseInfo;
                        this.enterpriseSuc = true;
                    } else {
                        this.enterpriseSuc = false;
                    }
                });
            }
        },
        created() {
            this.district = district;
            this.getRealNameInfo();
            this.formValidate.mobile = JSON.parse(cookies.get("info")).mobile;
            this.action = `${process.env.VUE_APP_BASE_API}/qhApi/imageUpload`;
            const token = cookies.get("token");
            this.headers = {
                Authorization: "Bearer " + (token ? token : ""),
            };
        },
    };
</script>

<style lang="less" scoped>
.page-gird-container {
  box-shadow: rgba(10, 32, 51, 0.12) 0px 1px 3px 0px;
  padding: 24px;
  background-color: #fff;
  .title {
    font-size: 16px;
    font-weight: 900;
    margin-bottom: 20px;
  }
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    width: 400px;
    border: 1px solid rgb(235, 235, 235);
    .font-size-lg {
      font-size: 18px;
      margin: 20px 0 10px 0;
      cursor: pointer;
    }
  }
}
#canvas {
  width: 80% !important;
  height: auto !important;
}

[v-cloak] {
  display: none !important;
}
</style>
